<template>
  <div id="two">
    <h1>Home组件</h1>
    <ul>
      <li v-for="(item,i) in setlists" :key="i">
        <span class="name">{{ item.name }}</span>
        <span class="price">${{ item.price }}</span>
      </li>
    </ul>
    <button @click="depreciate">商品降价</button>
  </div>
</template>
  <script>
export default {
  computed:{
    lists(){
      return this.$store.state.lists
    },
    setlists(){
      return this.$store.getters.num
    }
  },
  data() {
    return {};
  },
  components: {},
  methods:{
    depreciate(){
      this.$store.commit("depreciate")
    }
  },
};
</script>
<style lang="less">
#two {
  background: #d1e4ff;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
  margin-bottom: 30px;
  padding: 10px 20px;
}
#two ul {
  padding: 0;
  list-style-type: none;
}
#two li {
  margin-right: 10px;
  margin-top: 10px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
}
.price {
  font-weight: bold;
  color: #860ce8;
  display: block;
}
</style>
